<script setup lang="ts">
import {reactive, ref, onMounted} from "vue";
import {RouterView, useRouter} from "vue-router"
import headerNavigation from "@/components/headerNavigation/index.vue"

const router = useRouter()
onMounted(() => {
  router.push("/datasource/vector")
})
let menuData = reactive({
  activeIndex: "1"
})
</script>

<template>
  <el-container>
    <el-aside>
      <div class="aside-menu">
        <el-menu :default-active="menuData.activeIndex" :router="true">
          <el-menu-item index="1" route="/datasource/vector">
            <el-icon>
              <Coin/>
            </el-icon>
            <span>矢量数据</span>
          </el-menu-item>
          <el-menu-item index="2" route="/datasource/grid">
            <el-icon>
              <PictureFilled/>
            </el-icon>
            <span>栅格数据</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon>
              <InfoFilled/>
            </el-icon>
            <span>三维数据</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon>
              <InfoFilled/>
            </el-icon>
            <span>瓦片数据</span>
          </el-menu-item>
        </el-menu>
      </div>
    </el-aside>
    <el-main>
      <header-navigation></header-navigation>
      <div class="subpages">
        <RouterView/>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped lang="less">
.aside-menu {

  :deep(.el-menu) {
    .el-menu-item {
      border-right: 3px solid rgba(0, 0, 0, 0);
    }

    .is-active {
      background-color: #ebf4fd;
      border-color: #3e8ff0
    }
  }
}

.subpages {
  width: 100%;
  height: calc(100% - 34px)
}
</style>